<template>
	<!-- 招聘广场 -->
	<view :class="pageClass" :scroll-y="true" :style="pageStyle" v-if="pageReady"
	>
		<scroll-view class="index" :scroll-y="true"  @scrolltolower="scrolltolower">
			<moxi-nav :set="navSet"></moxi-nav>
			<moxi-choose :field="choose" :top="navHeight" @change="ch" v-model="info"></moxi-choose>
			<image :src="ad.zpl_img" v-if="ad.zpl_img&&ad.zpl_img.length"
			 mode="widthFix" style="width: 100%;" @click="navto(ad.zpl_url)"></image>
			<view class="search">
				<u-search placeholder="请输入内容" v-model="searchText" :showAction="false" bgColor="#fff"
					@search="searchBtn"></u-search>
			</view>
			<view class="lists">
				<view class="list" v-for="(list, index) in listsData" :key="index" @click="goDetail(list.id)">
					<view class="top">
						<view class="left">{{list.title}}</view>
						<view class="right" :style="{color:app_color}">{{zh(list.min_money)}}-{{zh(list.max_money)}}</view>
					</view>
					<view class="middle">
						
						<view class="bottom">
							<view class="tab" v-for="t in list.tag">{{t}}</view>
						</view>
					</view>
					<view class="footer">
						<view class="top">{{list.qiye&&list.qiye.name?list.qiye.name:''}}</view>
						<view class="right">{{list.province}} - {{list.city}}</view>
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;">
			<u-divider style="padding-bottom: 10px;" text="没有更多内容了" v-if="hasMore == false"></u-divider>
		</view>
		</scroll-view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					page: 1,
					page_num: 7,
					type:"",
					province:"",
					city:"",
					la:"",
					ln:"",
					distance:"",
					exp:"",
					edu:"",
					search:""
				},
				hasMore:true,
				listsData: [],
				ztype:null,
				choose:[
					
					{
						name:'地区',
						type:"city",
					},
					{
						name:'距离',
						type:"distance", 
						distance:""
					},
					{
						name:'筛选',
						type:"choose",
						list:[]
					},
				] ,
				searchText: '',
				ad:{
					
				}
			}
		},
		onLoad() {
			this.get()
		},
		methods: {
			ch(v) {
				this.info = Object.assign(this.info, v);
				this.clear()
				this.get(1)
			},
			clear() {
				this.hasMore = true
				this.info.page = 1
				this.listsData = []
			},
			scrolltolower(){
				this.info.page++;
				this.get()
			},
			zh(num) {
				// console.log('num ==>', num);
				num = Number(num);
				if (num >= 1000) {
					return (num / 1000).toFixed(1) + 'K'
				} else {
					return num.toString()
				}
			},
			goDetail(id) {
				this.navto('pages/plugin/zx/jobDetails?id=' + id)
			},
			searchBtn() {
				this.clear()
				this.searchText = this.searchText.trim()
				this.info.search = this.searchText
				this.get(1)
			},
			get(page) {
				if(page){
					this.info.page = page;
					if(page==1){
						this.listsData = [];
					}
				}
				
				if(!this.hasMore){
					return;
				}
				let self = this
				this.moxiPost('/plugin/zx/index/zhaoping/get_list', this.info, function(data) {
					console.log(data);
					if(data.data.allpage<=self.info.page){
						self.hasMore = false;
					}
					if(data.ad){
						self.ad = data.ad;
						self.$forceUpdate()
					}
					for(let k in data.data.data){
						self.listsData.push(data.data.data[k])
					}
					if(self.ztype===null){
						self.ztype = data.ztype;
						let z = [{
							name:"不限",
							value:""
						}];
						for(let k in self.ztype){
							z.push({
								name:self.ztype[k],
								value:k
							})
						}
						if(data.exp){
							console.log(data.exp);
							let e = [{
								name:"不限",
								value:""
							}];
							for(let k in data.exp){
								e.push({
									name:data.exp[k],
									value:k
								})
							}
							self.choose[2].list.push({
												name:"经验",
												key:"exp",
												list:e
							})
						}
						if(data.edu){
							let e = [{
								name:"不限",
								value:""
							}]; 
							for(let k in data.edu){
								e.push({
									name:data.edu[k],
									value:k
								})
							}
							self.choose[2].list.push({
												name:"学历",
												key:"edu",
												list:e
							})
						}
						self.choose.unshift({
								name:'分类',
								type:"list",
								key:"type",
								list:z
						})
					}
					// console.log('self.listsData ==>', self.listsData);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		// width: 94%;
		// margin: 10px auto;
		padding: 12px;
		background-color: #f5f5f5;
	}
	.lists {
		width: 94%;
		margin: 0 auto;

		.list {
			border-radius: 4px;
			margin-bottom: 10px;
			padding: 10px;
			background-color: #fff;

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}

			.top {
				color:#555;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 16px;
					font-weight: bold;
				}

				.right {
					font-size: 16px
				}
			}

			.middle {
				margin: 10px 0;
				font-size: 14px;
				color: #8f8f8f;

				.bottom {
					max-width: 70%;
					height: 24px;
					margin-top: 10px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;

					.tab {
						margin-right: 6px;
						padding: 4px;
						border-radius: 4px;
						background-color: #f2f2f2;
						font-size: 12px;

						&:nth-last-of-type(1) {
							margin-right: 0;
						}
					}
				}
			}

			.footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				.right {
					color: #8f8f8f;
				}
			}
		}
	}

	.index {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
		overflow: auto;
	}
</style>